<template>
    <div :id="myid" class="mychart"></div>
</template>

<script>
    // import echarts from 'echarts'
    let echarts = require('echarts/lib/echarts')
    require("echarts/lib/chart/line")
    require("echarts/lib/chart/bar")
    require("echarts/lib/chart/pie")
    // 引入标题组件和提示框组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title');

    export default {
        name: 'echarts',
        data(){
            return {
                myid: this.uuid(),  // 生成一个唯一标志符
                myoption:{
                    color:['#d36d82'],
                    title:{
                        text:''
                    },
                    grid: {
                        top: '',
                        right: '',
                        bottom: '',
                        left: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true
                        }
                    },
                    series:[{
                        type:'line',
                        data:[]
                    }]
                }
            }
        },
        props: ['option','title','top','right','bottom','left','data','type', 'month'],
        watch: {
            data(val) {
                this.formdata()
                this.draw()

            }
        },
        methods: {
            formdata() {
                // 1. 判断是否传入option && option是对象
                if(this.option && typeof(this.option) == 'object') {
                    this.myoption = this.cloneObj(this.option)

                    this.myoption.xAxis = this.myoption.xAxis? this.myoption.xAxis:{type: 'category', data: []}
                    this.myoption.yAxis = this.myoption.yAxis? this.myoption.yAxis:{type: 'value'}
                }

                if(this.title) {
                    this.myoption.title = this.title
                } else if(!this.myoption.title.text) {
                    this.myoption.grid.top = '30px'
                }

                if(this.top) {
                    this.myoption.grid.top = this.top
                }else if (!this.myoption.grid.top) {
                    this.myoption.grid.top = '60'
                }

                if(this.right) {
                    this.myoption.grid.right = this.right
                }else if (!this.myoption.grid.right) {
                    this.myoption.grid.right = '10%'
                }

                if(this.bottom) {
                    this.myoption.grid.bottom = this.bottom
                }else if (!this.myoption.grid.bottom) {
                    this.myoption.grid.bottom = '60'
                }

                if(this.left) {
                    this.myoption.grid.left = this.left
                }else if (!this.myoption.grid.left) {
                    this.myoption.grid.left = '10%'
                }

                if(this.type) {
                    this.myoption.series[0].type= this.type
                } else if (!this.myoption.series[0].type) {
                    this.myoption.series[0].type= 'line'
                }

                //  判断是否传入 data,传入则判断 String, Array 还是 Object
                if(this.data) {
                    this.myoption.series[0].data = []
                    if(typeof(this.data) == 'string') {
                        // 当传入的是String类型的值时，转为数组后赋值
                        this.myoption.series[0].data = this.data.split(",")

                    } else if(typeof(this.data) == 'object' && this.data instanceof Array) {

                        try{
                            if(this.data[0].profit && this.data[0].date) {
                                // 当传入的是Array，其中每个值都是一个包含“键”和“值”的对象时
                                if(this.month) {
                                    // 按月计算
                                    var data = []
                                    for (let i = 0; i < this.data.length; i++) {
                                        let m = this.data[i].date.substr(0, 7)
                                        if(!data.hasOwnProperty(m)) {
                                            data[m] = this.data[i].profit
                                        } else {
                                            data[m] += this.data[i].profit
                                        }
                                    }

                                    this.myoption.series[0].data = this.mysplit(data).valArr
                                    this.myoption.xAxis.data = this.mysplit(data).keyArr

                                } else {
                                    // 按天计算
                                    for (var i = 0; i < this.data.length; i++) {
                                        this.myoption.series[0].data[i] = this.data[i].profit
                                        this.myoption.xAxis.data[i] = this.data[i].date
                                    }
                                }

                                
                            } else {
                                for (var i = 0; i < this.data.length; i++) {
                                    this.myoption.series[0].data[i] = this.data[i][1]
                                    this.myoption.xAxis.data[i] = this.data[i][0]
                                }
                            } 
                        }
                        catch(e){
                            console.log("有异常")
                        }  
                    }
                } 
                
                console.log(this.myoption)
            },
            draw() {
                let myChart = echarts.init(document.getElementById(this.myid))
                myChart.setOption(this.myoption)
            },
            // 用于生成时间上和空间上的唯一标识符，类似于random(),不过uuid理论上永远不会重复
            uuid(){
                var s = [];  
                var hexDigits = "0123456789abcdef";  
                for (var i = 0; i < 36; i++) {
                s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);  
                }  
                s[14] = "4"; 
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); 
                s[8] = s[13] = s[18] = s[23] = "-";  
                var uuid = s.join("");  
                return uuid;
            },
            // 深拷贝一个对象
            cloneObj(obj){
                var str, newobj = obj.constructor === Array ? [] : {};
                if(typeof obj !== 'object'){
                    return;
                } else if(window.JSON){
                    str = JSON.stringify(obj),
                    newobj = JSON.parse(str);
                } else {
                    for(var i in obj){
                        newobj[i] = typeof obj[i] === 'object' ? 
                        cloneObj(obj[i]) : obj[i]; 
                    }
                }
                return newobj;
            },
            // 数组去重法 
            unique(array){ 
                var n = []; 
                for(var i = 0; i < array.length; i++){ 
                    if (n.indexOf(array[i]) == -1) {
                        n.push(array[i]); 
                    }
                }
                return n; 
            },
            // 遍历关联数组，返回两个数组，一个由索引组成的数组，一个由值组成的数组
            mysplit(array) {
                var keyArr = []
                var valArr = []
                for (let key in array) {
                    console.log("8888888888888")
                    keyArr.push(key)
                    valArr.push(array[key])
                }
                return {
                    keyArr,
                    valArr
                }
            }

        },
        mounted() {
            this.formdata()
            this.draw()
        }
    }
</script>

<style scoped>
    div {
        width: 100%;
        height: 300px;
    }
</style>